<template>
	<view class="login-container">
		<!-- 标题 -->
		<view class="nav"></view>
		<view class="title">社区医疗</view>

		<!-- 登录表单 -->
		<view class="form">
			<h1 style="font-size: 44rpx;font-weight: bold;padding: 10rpx;">登录</h1>
			<!-- 手机号输入框 -->
			<view class="input-group">
				<input class="input" type="number" v-model="phone" placeholder="请输入登录手机号" maxlength="11" />
			</view>

			<!-- 密码输入框 -->
			<view class="input-group">
				<input class="input" type="password" v-model="password" placeholder="请输入密码" />
			</view>

			<!-- 登录按钮 -->
			<button class="login-btn" @click="handleLogin">登录</button>

			<!-- 注册引导 -->
			<view class="register-tip">
				没有账户？<text class="register-link" @click="goToRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	const phone = ref('');
	const password = ref('');

	// 表单验证
	const validateForm = () => {
		if (!phone.value) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return false;
		}

		if (!/^1[3-9]\d{9}$/.test(phone.value)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return false;
		}

		if (!password.value) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			});
			return false;
		}

		if (password.value.length < 6) {
			uni.showToast({
				title: '密码长度不能少于6位',
				icon: 'none'
			});
			return false;
		}

		return true;
	};

	// 登录请求
const handleLogin = async () => {
  if (!validateForm()) return;

  uni.showLoading({
    title: '登录中...'
  });

  try {
    // 获取本地存储的 token（如果有的话）
    const token = uni.getStorageSync('token');
    
    // 准备请求头，添加 token
    const headers = { 
      'Content-Type': 'application/x-www-form-urlencoded',
    };
    
    // 如果有 token，则添加到请求头中
    if (token) {
      headers['Authorization'] = `Bearer ${token}`;
    }

    const res = await uni.request({
      url: 'http://localhost:3010/user/login',
      method: 'POST',
      header: headers, // 使用包含 token 的请求头
      data: `phone=${phone.value}&pwdmd5=${password.value}`
    });

    console.log('uni.request 返回的 res:', res);

    uni.hideLoading();

    // 后端用 code=200 表示成功，其他 code（如400）表示失败
    if (res.statusCode === 200) { 
      if (res.data.code === 200) { // 接口业务逻辑成功
        uni.setStorageSync('token', res.data.data.token);
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          });
        }, 1000);
      } else { // 接口业务逻辑失败（如账号密码错）
        uni.showToast({
          title: res.data.msg || '登录失败', // 用后端返回的 msg 提示
          icon: 'none'
        });
      }
    } else { // HTTP 状态码不是 200，请求本身失败
      uni.showToast({
        title: '请求失败，状态码：' + res.statusCode,
        icon: 'none'
      });
    }
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: '网络错误，请稍后重试',
      icon: 'none'
    });
    console.error('登录错误:', error);
  }
};
	// 跳转到注册页
	const goToRegister = () => {
		uni.navigateTo({
			url: '/pages/My/Zhuce/Zhuce'
		});
	};

	// 页面加载时检查是否已登录
	onLoad(() => {
		const token = uni.getStorageSync('token');
		if (token) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	});
</script>

<style scoped>
	.login-container {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav {
		width: 180rpx;
		height: 180rpx;
		background-color: #83ffc3;
		border-radius: 20rpx;
		margin-top: 60rpx;
	}

	.title {
		font-size: 30rpx;
		color: #333;
		margin-top: 30rpx;
		margin-bottom: 80rpx;
	}

	.form {
		width: 95%;
		padding: 10rpx;
		margin-top: 100rpx;
	}

	.input-group {
		margin-bottom: 40rpx;
	}

	.input {
		width: 90%;
		height: 90rpx;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #00d36d;
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.login-btn {
		width: 98%;
		height: 90rpx;
		background-color: #00d36d;
		color: white;
		border-radius: 8rpx;
		font-size: 36rpx;
		margin-right: 210rpx;
		margin-top: 100rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.register-tip {
		text-align: center;
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #999;
	}

	.register-link {
		color: #00d36d;
		margin-left: 10rpx;
		font-weight: bold;
	}
</style>